<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div,
        p {
            width: 400px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: red;
        }

    </style>
      <button>显示当前系统时间</button>
      <div>某个时间</div>
      <p>1123</p>
      <script>
          /* 
              DOM：
                  文档、元素、节点。进行增删改查
              1. 点击按钮，div 显示当前时间
              2. 刷新页面，p标签内容为当前时间。
  
              对象.innerHTML 可以对元素内容进行修改
          */
          /* 
              1. 获取元素
              2. 绑定事件
              3. 事件的具体内容
          */
          var button = document.querySelector('button');
          var div = document.querySelector('div');
          var p = document.querySelector('p');
          button.onclick = function () {
              // div.innerHTML = "虞姬";
              var date = new Date();
              var temp = getTimer(date);
              div.innerHTML = temp;
          }
          var date = new Date();
          var temp = getTimer(date);
          p.innerHTML = temp;
  
          // 封装一个函数，获取当前时间的年月日时分秒吗？
          function getTimer(date) {
              var arr = ['周日', '星期一', '星期二', '星期三', '星期四', '星期五', '周六'];
              // var date5 = new Date('2021-11-22 17:10:20');
              var year = date.getFullYear();
              var month = date.getMonth() + 1;
              var date1 = date.getDate();
              var week = date.getDay();
              var h = date.getHours();
              var m = date.getMinutes();
              var s = date.getSeconds();
  
              return "今天是" + year + "年" + month + "月" + date1 + "号" + arr[week] + h + "时" + m + "分" + s + "秒";
          }
  
  
  
      </script>
</body>
</html>